<template>
  <div class="tranfer-number">
    <div class="update-div">
      <span>粘贴数据,最多50条</span>
      <a-spin :spinning="loading">
        <XlsxTable :columns="xlsxColumnTop" :colWidths="colWidthsTop" :table-data="formStateTop" :config="{ height: '300px', ...conifg }" :minRows="50" :showButton="false"></XlsxTable>
      </a-spin>
    </div>
    <div class="update-button">
      <a-button type="primary" :loading="loading" @click="submitHandle">上传</a-button>
    </div>

    <div class="update-div" v-if="formStateBottom.length">
      <span>上传失败数据：</span>
      <a-spin :spinning="loading">
        <XlsxTable :columns="xlsxColumnBottom" :colWidths="colWidthsButton" :table-data="formStateBottom" :config="{ height: '300px', ...conifg }" :minRows="50" :showButton="false"></XlsxTable>
      </a-spin>
    </div>

    <div class="operation-btn-wrapper">
      <!-- <a-button v-debounce @click="submitHandle" :loading="loading" type="primary">保 存</a-button> -->
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { xlsxColumnTop, colWidthsTop, colWidthsButton, xlsxColumnBottom } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);

const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible } = toRefs(props);
const { formStateTop, formStateBottom, conifg, loading } = InitHook();
const { submitHandle, cancelHandle } = OperationHook({ formStateTop, formStateBottom, emit, loading });

watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      formStateTop.value = [];
      formStateBottom.value = [];
    }
  }
);
</script>
<style lang="stylus" scoped>
.tranfer-number{
    background-color: #fff;


    .update-button{
        display:flex;
        justify-content:flex-end
        margin:20px 16px 0px 0px
    }

    .update-div{
        margin-top:20px;
    }

    .operation-btn-wrapper{
        :deep(.ant-btn){
            margin-right: 16px;
        }
        display:flex;
        justify-content:flex-end;
        margin-top:20px
    }
}
</style>
